import React from 'react'

import { BrowserRouter as Router, Route, Link, NavLink, Switch, Redirect } from 'react-router-dom'

const AAA = () => <h1> 组件a</h1>
const BBB = () => <h1> 组件b</h1>
const CCC = () => <h1> 组件C</h1>


//  思考 如何 做路由拦截 
export default function List () {
    return (
        <>

            <div>List</div>

            <li>
                <NavLink to="/list/a">a</NavLink>
            </li>
            <li>
                <NavLink to="/list/b">b</NavLink>
            </li>
            <li>
                <NavLink to="/list/c">c</NavLink>
            </li>
            <li>
                <NavLink to="/list/d">d</NavLink>
            </li>
            <Redirect from="/list" exact to="/list/a" />
            <Route path='/list/a' component={AAA} ></Route>
            <Route path='/list/b' component={BBB} ></Route>
            <Route path='/list/c' strict component={CCC} ></Route>
            <Route path='/list/d' strict render={() => <h1>我是render 渲染的组件 list/d</h1>} ></Route>
            {/* <Route path='/login' strict render={() => <h1>我是render 渲染的组件 list/d</h1>} ></Route>
            <Route path='/home' strict render={() => <h1>我是render 渲染的组件 list/d</h1>} ></Route> */}
        </>


    )
}
